<template>
  <button @click="sum++">{{ sum }}</button>
</template>

<script>
import {
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onServerPrefetch,
  ref,
} from "vue";
export default {
  setup() {
    const sum = ref(0);
    onBeforeMount(() => console.log("onBeforeMount"));
    onMounted(() => console.log("onMounted"));
    onBeforeUpdate(() => console.log("onBeforeUpdate"));
    onUpdated(() => console.log("onUpdated"));
    onBeforeUnmount(() => console.log("onBeforeUnmount"));
    onUnmounted(() => console.log("onUnmounted"));
    onActivated(() => console.log("onActivated"));
    onDeactivated(() => console.log("onDeactivated"));
    onServerPrefetch(() => console.log("onServerPrefetch"));
    console.log("setup");
    return {
      sum,
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeUnmount() {
    console.log("beforeUnmount");
  },
  unmounted() {
    console.log("unmounted");
  },
  activated() {
    console.log("activated");
  },
  deactivated() {
    console.log("deactivated");
  },
  serverPrefetch() {
    console.log("serverPrefetch");
  },
};
</script>

<style>
</style>
